
<template>
  <div class="myorder">
    <!------------------------------------------------------返回导航------------------------------------------------------------------>
    <HeaderTitle :title="WebName"></HeaderTitle>
    <van-pull-refresh v-model="MianLoading" @refresh="onRefresh">
      <!------------------------------------------------------评价------------------------------------------------------------------>
      <van-tabs v-model="active" swipeable sticky>
        <van-tab v-for="(item,TabnavKey) in Tabnav" :title="item" :key="TabnavKey">
          <!--
            商品卡片
            全部商品：0
            待付款:1
            待发货:2
            待收货:3
            已完成:4
            售后:5
          -->
          <van-card
            num="2"
            :price="item.orderPrice"
            :title="item.commodityName"
            :thumb="item.commodityImg"
            v-for="item in IsOrder (TabnavKey)"
            :key="item.orderCode"
            @click-thumb="$router.push('./orderdetails?order='+item.orderId)"
          >
            <div slot="footer" class>
              <p>
                合计：
                <span>￥{{item.orderPrice}}</span>
              </p>
              <van-row>
                <van-col span="6"></van-col>
                <van-col span="18">
                  <van-button size="mini" v-if="item.orderStatus===1" @click="$toast('取消订单')">取消订单</van-button>
                  <van-button
                    size="mini"
                    v-if="item.orderStatus===1"
                    @click="$toast('立即支付')"
                    color="#ED9609"
                    plain
                  >立即付款</van-button>
                  <van-button size="mini" v-if="item.orderStatus===2" @click="$toast('取消订单')">取消订单</van-button>
                  <van-button size="mini" v-if="item.orderStatus===3" @click="$router.push('./logistics?order='+item.orderId)">查看物流</van-button>
                  <van-button
                    size="mini"
                    v-if="item.orderStatus===3"
                    @click="$toast('确认收货')"
                    color="#ED9609"
                    plain
                  >确认收货</van-button>
                  <van-button
                    size="mini"
                    v-if="item.orderStatus===4"
                    @click="$toast('确认收货')"
                    color="#ED9609"
                    plain
                  >申请售后</van-button>
                </van-col>
              </van-row>
            </div>
          </van-card>
        </van-tab>
      </van-tabs>
    </van-pull-refresh>
  </div>
</template>
<script>
/* ... */
import HeaderTitle from '@/components/HeaderTitle.vue'
import { userorders } from '@/api/api'
export default {
  name: 'real',

  mixins: [],

  components: {
    HeaderTitle
  },

  props: {},

  data () {
    return {
      WebName: '我的订单',
      MianLoading: false,
      count: 0,
      Tabnav: ['全部', '待付款', '待发货', '待收货', '已完成'],
      active: 0,
      AllOrderData: [], // 全部商品
      stayOrderData: [], // 待付款
      goodsOrderData: [], // 待发货
      shippingOrderData: [], // 待收货
      completeOrderData: [] // 已完成
    }
  },

  computed: {},

  watch: {},

  created () {
    if (localStorage.getItem('X-Auth-Token')) {
      // 判断URL传值当前页面。
      this.GetJsonAddress({ status: 0 })
      this.stayOrderDataF({ status: 1 })
      this.goodsOrderDataF({ status: 2 })
      this.shippingOrderDataF({ status: 3 })
      this.completeOrderDataF({ status: 4 })
      if (this.$route.query.type === '0') {
        this.active = 0
      } else if (this.$route.query.type === '1') {
        this.active = 1
      } else if (this.$route.query.type === '2') {
        this.active = 2
      } else if (this.$route.query.type === '3') {
        this.active = 3
      } else if (this.$route.query.type === '4') {
        this.active = 4
      }
    } else {
      this.$toast.fail('您未曾登陆')
      this.$router.push('./login?tabs=0')
    }
  },

  mounted () {},

  destroyed () {},

  methods: {
    // 列表数据请求
    GetJsonAddress (data) {
      userorders(this.$qs.stringify(data))
        .then(res => {
          console.log(res.data.data)
          this.AllOrderData = res.data.data
          if (res.data.code === 200) {
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 列表数据请求
    stayOrderDataF (data) {
      userorders(this.$qs.stringify(data))
        .then(res => {
          console.log(res.data.data)
          this.stayOrderData = res.data.data
          if (res.data.code === 200) {
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 列表数据请求
    goodsOrderDataF (data) {
      userorders(this.$qs.stringify(data))
        .then(res => {
          console.log(res.data.data)
          this.goodsOrderData = res.data.data
          if (res.data.code === 200) {
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 列表数据请求
    shippingOrderDataF (data) {
      userorders(this.$qs.stringify(data))
        .then(res => {
          console.log(res.data.data)
          this.shippingOrderData = res.data.data
          if (res.data.code === 200) {
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 列表数据请求
    completeOrderDataF (data) {
      userorders(this.$qs.stringify(data))
        .then(res => {
          console.log(res.data.data)
          this.completeOrderData = res.data.data
          if (res.data.code === 200) {
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 下拉刷新事件
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.MianLoading = false
        this.count++
      }, 500)
    },
    IsOrder (key) {
      if (key === 0) {
        return this.AllOrderData
      } else if (key === 1) {
        return this.stayOrderData
      } else if (key === 2) {
        return this.goodsOrderData
      } else if (key === 3) {
        return this.shippingOrderData
      } else if (key === 4) {
        return this.completeOrderData
      }
    }
  }
}
</script>

<style lang="less" >
/* ... */

.container {
  margin: 0 15px;
}
.myorder {
  height: 100%;
  background-color: #f6f6f6;
  .van-pull-refresh {
    height: calc(100% - 50px);
    overflow-y: auto;
    .van-tabs {
      .van-sticky--fixed {
        top: initial;
      }
      .van-tabs__wrap {
        .van-tabs__nav {
          .van-tabs__line {
            background-color: #d7b782;
          }
        }
      }
      .van-tabs__content {
        margin-top: 10px;
        .van-card {
          background-color: #ffffff;
          .van-image {
            background-color: #fafafa;
          }
        }
        .van-card__footer {
          .van-col--6 {
            text-align: left;
            p {
              margin: 0;
              font-size: 12px;
              color: #333333;
              span {
                color: #fc612b;
              }
            }
          }
          .van-col--18 {
            text-align: right;
            p {
              margin: 0;
            }
          }
        }
      }
    }
  }
}
</style>
